<template>
    <view>
        <uv-popup ref="sexPopup" closeable round="1rem" :bgColor="blackxlight">
            <view class="text-center pt-5">
                <text class="text-base text-whitexlight">设定性别</text>
            </view>
            <view class="h-72 pt-2 flex flex-col box-border">
                <view class="flex w-full h-40 px-4 box-border justify-evenly items-center">
                    <view @click="chooseSex(2)" :class="form.sex == 2?'selected':''"
                        class="border border-solid w-24 h-28 flex justify-center items-center rounded-2xl">
                        <uv-icon size="80" name="woman" :color="pinkx"></uv-icon>
                    </view>
                    <view @click="chooseSex(1)" :class="form.sex == 1?'selected':''"
                        class="border border-solid w-24 h-28 flex justify-center items-center rounded-2xl">
                        <uv-icon size="80" name="man" :color="bluex"></uv-icon>
                    </view>
                </view>
                <view class="px-8">
                    <text class="text-whitexlight text-xs">性别设置后无法修改</text>
                </view>
                <view class="w-full box-border px-8 mt-4">
                    <view @click="setSex"
                        class="bg-bluex text-whitex font-extrabold box-border rounded-full p-2 text-base text-center">
                        保存性别
                    </view>
                </view>
            </view>
        </uv-popup>
    </view>
</template>

<script>
    import {
        colors
    } from '../../consts/colors';
    import {
        setSex
    } from '../../http/api';

    export default {
        name: "sexPopup",
        data() {
            return {
                blackxlight: colors.blackxlight,
                pinkx: colors.pinkx,
                bluex: colors.bluex,

                form: {
                    sex: 2,
                }
            };
        },
        methods: {
            async setSex() {
                const res = await setSex(this.form)
                this.$refs.sexPopup.close()
                uni.showToast({
                    title: res.message,
                    icon: 'none'
                })
            },
            open() {
                this.$refs.sexPopup.open("bottom")
            },
            chooseSex(v) {
                this.form.sex = v
            },
        }
    }
</script>

<style>
    .selected {
        @apply border-bluex bg-blackx;
    }
</style>